<template>
    <div class="ClasslistA">
        <!--头部插槽-->
        <router-link :to="{path:'/titList',query:{url:'/?method=flower.index.lessonList',title:'免费课程',is_free:1,prev:false}}" tag="h3">{{data.title}} <span>更多<img src="../../assets/right.png" alt=""></span></router-link>
        <!--列表插槽 旧-->
        <!-- <ul class="lists">
            <router-link tag="li" :to="{path:'detail',query:{lession_id:item.lession_id,member_id:getMemberId()}}" class="clearfix animated lightSpeedIn" :style="{animationDelay:delay(index)}" v-for="(item,index) in data.list" :key="index">
                <img :src="item.lession_img" alt="">
                <div class="infos">
                    <h4 class="tit"><span class="end" v-if="item.is_complete">完结</span>{{item.lession_name}}</h4>
                    <p class="admin">{{item.teacher_name}}&emsp;{{item.teacher_level}}  </p>
                    <div class="other">
                        <span><i class="el-icon-view"></i>&#8197;{{item.lession_view}}</span>
                        <span><i class="el-icon-time"></i>&#8197;{{item.lession_num_hour}}</span>
                        <span v-if="item.lession_price>0"><strong>{{item.lession_price}}</strong>花瓣</span>
                        <span v-else><strong>免费</strong></span>
                    </div>
                </div>
            </router-link>
        </ul> -->
        <!--列表插槽 新-->
        <cube-scroll
            ref="scroll"
            :data="data.list"
            direction="horizontal"
            class="horizontal-scroll-list-wrap"
        >
            <ul class="list-wrapper">
                <router-link tag="li" :to="{path:'detail',query:{lession_id:item.lession_id,member_id:getMemberId()}}" class="clearfix animated lightSpeedIn list-item" :style="{animationDelay:delay(index)}" v-for="(item,index) in data.list" :key="index">
                    <img :src="item.lession_img" alt="">
                    <h6>{{item.lession_name}}?</h6>
                    <div class="bottom">
                        <div class="left">
                            <span>{{item.teacher_name}}</span>
                            <p>
                                <img src="../../assets/class/play.png" alt="">
                                <span>{{item.lession_view}}</span>
                            </p>
                        </div>
                        <span>免费</span>
                    </div>
                </router-link>
            </ul>
        </cube-scroll>
    </div>
</template>

<script>
    export default {
        name: 'ClasslistA',
        data () {
            return {
            }
        },
        props:['data'] //父组件带过来的参数
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
    .ClasslistA {
        // margin-top: .2rem;
        padding: 0 .16rem;
        background-color: #fff;    
        /*标题*/
        h3{
            height: .86rem;
            font-size: .3rem;
            font-weight: bold;  
            color: #000;
            display: flex;
            align-items: center;
            justify-content: space-between;
            span{
                float: right;
                color: #999999;
                font-size: .24rem;
            }
            img {
                width: .12rem;
                height: .24rem;
                margin-left: .06rem;
                position: relative;
                top: .02rem;
            }
        }
        .list-item {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            box-sizing: border-box;
            &:not(:last-of-type) {
                margin-right: .2rem;
            }
            >img {
                display: block;
                width: 4.1rem;
                height: 2.96rem;
                object-fit: cover;
            }
            h6 {
                font-size: .26rem;
                font-weight: bold;
                color: #222;
                line-height: .3rem;
                margin-top: .24rem;
            }
            .bottom {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 0 .06rem;
                font-size: .22rem;
                color: #777;
               .left {
                    display: flex;
                    align-items: center;
                    p {
                        display: flex;
                        align-items: center;
                        margin-left: .56rem;
                        img {
                            width: .2rem;
                            height: .2rem;
                            margin-right: .04rem;
                            padding-top: .02rem;
                        }
                    }
                } 
                >span {
                    color: #e7470e;
                }
            }
        }
        /*产品列表*/
        .lists{
            overflow-x: hidden;
            li{
                width: 100%;
                padding:.26rem 0;
                border-bottom: 1px solid #e4e4e4;
                /*左侧图片*/
                img{
                    width: 1.88rem;
                    height: 1.35rem;
                    float: left;
                }
                /*右侧信息*/
                .infos{
                    margin-left: 1.88rem;
                    padding-left: .2rem;
                    position: relative;
                    /*标题*/
                    .tit{
                        text-overflow: ellipsis;
                        overflow: hidden;
                        white-space: nowrap;
                        color: #333;
                        height: .34rem;
                        line-height: .34rem;
                        margin-bottom: .24rem;
                        span.end{
                            display: inline-block;
                            height: 100%;
                            font-size: .28rem;
                            padding: 0 .12rem;
                            border-radius: .06rem;
                            margin-right: .1rem;
                            color: #fff;
                            background-color: #e7470e;
                        }
                    }
                    /*老师*/
                    .admin{
                        color: #777;
                        margin-bottom: .28rem;
                        font-size: .22rem;
                    }
                    /*其他*/
                    .other{
                        width: 100%;
                        display: flex;
                        justify-content: space-between;
                        align-items: baseline;
                        font-size: .22rem;
                        strong{
                            font-size: .28rem;
                            color: #e7470e;
                            font-weight: 600;
                            margin-right: .02rem;
                        }
                    }
                }
            }
        }
    }
</style>
